<template>
    <div style="height: 100%; position: relative">
        <el-drawer
            :title="type==='add'?'新增类目':'编辑类目'"
            :visible.sync="show_dialog"
            direction="rtl"
            size="80%"
            custom-class="demo-drawer"
            ref="drawer"
        >
            <div class="demo-drawer__content" ref="content">
                <el-form :model="form" :rules="rules" v-if="show_dialog" ref="categoryDrawer">
                    <el-form-item label="类目图标" :label-width="formLabelWidth" prop="goods_images">
                        <el-upload
                            class="avatar-uploader"
                            action="#"
                            :auto-upload="false"
                            :on-change="(val,list)=>{change(val,list,0)}"
                            :show-file-list="false"
                        >
                            <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                    <!-- <el-form-item
                        label="所属类目"
                        :label-width="formLabelWidth"
                    >
                        <el-select
                            v-model="form.parent_id"
                            placeholder="商品排序"
                        >
                            <el-option
								v-for="item in parent_arr"
								:key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>-->
                    <el-form-item label="类目名称" :label-width="formLabelWidth" prop="category_name">
                        <el-input v-model="form.category_name"></el-input>
                    </el-form-item>
                    <el-form-item label="列表图标" :label-width="formLabelWidth" prop="list_images">
                        <el-upload
                            class="avatar-uploader"
                            action="#"
                            :auto-upload="false"
                            :on-change="(val,list)=>{change(val,list,1)}"
                            :show-file-list="false"
                        >
                            <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="横幅图标" :label-width="formLabelWidth" prop="banner_images">
                        <el-upload
                            class="avatar-uploader"
                            action="#"
                            :auto-upload="false"
                            :on-change="(val,list)=>{change(val,list,2)}"
                            :show-file-list="false"
                        >
                            <img v-if="imageUrl3" :src="imageUrl3" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="显示" :label-width="formLabelWidth" prop="enable">
                        <el-switch
                            v-model="form.enable"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="1"
                            inactive-value="0"
                        ></el-switch>
                    </el-form-item>
                    <el-form-item label="排序" :label-width="formLabelWidth" prop="category_sort">
                        <el-input v-model="form.category_sort"></el-input>
                    </el-form-item>
                    <el-form-item label="商品排序" :label-width="formLabelWidth" prop="pgoods_sort_by">
                        <el-select v-model="form.pgoods_sort_by" placeholder="商品排序">
                            <el-option label="默认排序" value="默认排序"></el-option>
                            <el-option label="浏览量" value="浏览量"></el-option>
                            <el-option label="成交量" value="成交量"></el-option>
                            <el-option label="更新时间" value="更新时间"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button
                    type="primary"
                    @click="handleClose"
                    :loading="loading"
                >{{ loading ? "提交中 ..." : "确 定" }}</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
export default {
    props: ['dialog'],
    data() {
        var checkImageUrl3 = (rule, value, callback) => {
            // console.log(rule, value, callback)
            if (!value&&this.type==="add") {
                return callback(new Error('横幅图片不能为空'));
            }
            setTimeout(() => {
                callback();
            }, 1000);
        };
        return {
            loading: false,
            form: {
                parent_id: '',
                category_name: '',
                category_sort: '',
                pgoods_sort_by: '',
                enable: '',
                goods_images: '',
                list_images: '',
                banner_images: ''
            },
            item_data: {},
            formLabelWidth: '80px',
            timer: null,
            show_dialog: false,
            type: 'add',
            dialogImageUrl: '',
            dialogVisible: false,
            file_list: [],
            imageUrl1: '',
            imageUrl2: '',
            imageUrl3: '',
            deep: '',
            parent_arr: [
                { label: '顶级类目', value: '0' }
            ],
            rules: {
                goods_images: [
                    { required: true, message: '请上传类目图标', trigger: 'change' }
                ],
                category_name: [
                    { required: true, message: '请输入类目名称', trigger: 'blur' }
                ],
                list_images: [
                    { required: true, message: '请上传列表图标', trigger: 'change' }
                ],
                banner_images: [
                    { required: true, message: '请上传横幅图片', trigger: 'change' }
                ],
                enable: [
                    { required: true, message: '请选择显示按钮' }
                ],
                category_sort: [
                    { required: true, message: '请输入排序', trigger: 'blur' }
                ],
                pgoods_sort_by: [
                    { required: true, message: '请选择商品排序', trigger: 'change' }
                ],

            }
        };
    },
    created() {
        console.log('created', this)
        /* this.$parent.tabs = [
            { label: '品牌列表', name: 'tab-list' , path:'tab-list'},
            { label: '礼品列表', name: 'show-goods' , path:'show-goods'},
        ]
        this.$parent.activeName = 'tab-list'; */
    },
    methods: {
        change(val, list, index) {
            this.file_list[index] = list[0];
            this['imageUrl' + (index + 1)] = URL.createObjectURL(val.raw);
            // if (index == 2) { this.form.banner_images = this.file_list[2]; }
            switch (index) {
                case 0:
					this.form.goods_images = list[0]; 
                    this.rules.goods_images[0].required = false // 关闭图片验证，因element 验证有bug 图片即使已经上传 有时候还是会提示未上传
                    this.$refs.categoryDrawer.clearValidate("goods_images");
                    break;
                case 1:
					this.form.list_images = list[0];
                    this.rules.list_images[0].required = false
                    this.$refs.categoryDrawer.clearValidate("list_images");
                    break;
                case 2:
					this.form.banner_images = list[0];
                    this.rules.banner_images[0].required = false
                    this.$refs.categoryDrawer.clearValidate("banner_images");
                    break;
            }
            
            // console.log(val, list,index)
        },
        show_dialog_fn(type, deep, row) {
			this.item_data = row;
            if (type === 'edit') {
                this.type = 'edit';
                this.goodDetail(row.category_id);
            } else {
                this.imageUrl1 = '';
                this.imageUrl2 = '';
                this.imageUrl3 = '';
                this.form = {};
                this.type = 'add';
                this.parent_arr = [
                    { label: '顶级类目', value: '0' }
                ]
            }
            this.file_list = [];
            this.deep = deep;
            this.show_dialog = true;
            // 重新开启图片验证
            this.rules.goods_images[0].required = true
            this.rules.list_images[0].required = true
            this.rules.banner_images[0].required = true
        },
        goodDetail(id) {
            this.$http.get('/admin/pointprod/index.php?act=pointCategory&op=index&category_id=' + id).then((res) => {
                if (res.code === 1) {
                    this.form = {
                        parent_id: res.data.category_id,
                        category_name: res.data.category_name,
                        category_sort: res.data.category_sort,
                        pgoods_sort_by: res.data.pgoods_sort_by,
                        enable: res.data.enable,
                    }
                    this.deep = res.data.deep;
                    this.imageUrl1 = res.data.category_icon;
                    this.imageUrl2 = res.data.category_listicon;
                    this.imageUrl3 = res.data.banner_icon;
                    this.form.goods_images = res.data.category_icon;
                    this.form.list_images = res.data.category_listicon;
                    this.form.banner_images = res.data.banner_icon;
                    this.parent_arr = [
                        { label: res.data.category_name, value: res.data.parent_id }
                    ]
                    // this._message('success',res.msg);
                } else {
                    this._message('error', res.msg);
                }
            }, err => {
                this._message('error', res.msg);
            })
        },
        handleClose(done) {
            //done 用于关闭 Drawer
            done = this.$refs.drawer.closeDrawer;
            this.$refs.categoryDrawer.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    let fd = new FormData();
					if(this.type==='add'){
                        if(this.item_data) {
						    fd.append('deep', this.item_data.deep*1+1);
						    fd.append('parent_id', this.item_data.category_id);
                        } else {
                            fd.append('deep', 1);
						    fd.append('parent_id', 0);
                        }
					}else if(this.type==='edit'){
						fd.append('deep', this.item_data.deep);
						fd.append('parent_id', this.item_data.parent_id);
					}

                    fd.append('category_name', this.form.category_name);
                    fd.append('category_sort', this.form.category_sort);
                    fd.append('pgoods_sort_by', this.form.pgoods_sort_by);
                    fd.append('enable', this.form.enable);
                    fd.append('goods_images', this.form.goods_images && this.form.goods_images.raw);//传文件
                    fd.append('list_images', this.form.list_images && this.form.list_images.raw);//传文件
                    fd.append('banner_images', this.form.banner_images && this.form.banner_images.raw);//传文件
                    if (this.type === 'edit') {
                        fd.append('category_id', this.item_data.category_id);
                        this.editGood(fd).then(() => {
                            done();
                            this.$refs.content.scrollTop = 0;
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.loading = false;
                            }, 400);
                        })
                    } else {
                        this.addGood(fd).then(() => {
                            done();
                            this.$refs.content.scrollTop = 0;
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.loading = false;
                            }, 400);
                        })
                    }
                } else {
                    this.$message.error("请检测必填、必选项！")
                    return false;
                }
            })
            if (this.loading) {
                return;
            }
        },
        editGood(obj) {
            return this.$http.post('/admin/pointprod/index.php?act=pointCategory&op=update', obj).then((res) => {
                if (res.code === 1) {
                    /* for(let key in this.form){
                        this.item_data[key] = this.form[key];
                    }
                    this.item_data.brand_icon = this.imageUrl1; */
                    this._message('success', res.msg);
                } else {
                    this._message('error', res.msg);
                }
            }, err => {
                this._message('error', res.msg);
            })
        },
        addGood(obj) {
            return this.$http.post('/admin/pointprod/index.php?act=pointCategory&op=add', obj).then((res) => {
                if (res.code === 1) {
                    // this.$parent.getList();
                    this._message('success', res.msg);
                } else {
                    this._message('error', res.msg);
                }
            }, err => {
                this._message('error', res.msg);
            })
        },
        cancelForm() {
            this.loading = false;
            this.show_dialog = false;
            clearTimeout(this.timer);
        },
        getGoodDetail(id) {
            /* this.$http.get('/admin/pointprod/index.php?act=pointBrand&op=index&category_id='+id).then(res => {
                console.log(res)
                if (res.code === 1) {
                    this.goodDetail = res.data || {};
                }
            }) */
        }
    },
    beforeDestroy() {
        console.log('beforeDestroy')
    }
};
</script>
<style lang="scss" scoped>
.el-form {
    width: 460px;
    padding-left: 10px;
}
.el-select /deep/.el-input {
    width: 370px;
}
.demo-drawer__content {
    position: absolute;
    top: 0;
    bottom: 60px;
    width: 100%;
    overflow-y: auto;
}
/deep/.el-drawer__body {
    position: absolute;
    top: 77px;
    bottom: 0;
    width: 100%;
    overflow: auto;
    padding-bottom: 60px;
}
.demo-drawer__footer {
    position: absolute;
    bottom: 10px;
    left: 20px;
}
.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader /deep/.el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
